<template>
  <tree-select :data.sync="items" :value="value" @change="handleChange">
  </tree-select>
</template>
<script>
import treeSelect from "./treeSelect.vue";
import { getPermissionGroup } from "@/api/permission";
export default {
  components: {
    treeSelect,
  },
  data() {
    return {
      items: [],
      value: null,
    };
  },
  model: {
    prop: "id",
    event: "innerChange",
  },
  methods: {
    getData() {
      getPermissionGroup(this.groupId).then((res) => {
        res = res || { items: [] };

        this.items = res.items.toTree();
      });
    },
    handleChange(value) {
      this.$emit("innerChange", value.id);
    },
  },
  mounted() {},
  watch: {
    groupId: {
      handler(value) {
        if (!value) this.items = [];
        else this.getData();
      },
      immediate: true,
    },
    id: {
      handler(value) {
        this.value = value;
      },
      immediate: true,
    },
  },
  props: {
    groupId: {
      type: String,
      default: "",
    },
    id: {
      type: String,
      default: "",
    },
  },
};
</script>
<style scoped></style>
